<template>
  <div class="exportRecords">
    <el-tabs v-model="queryParams.exportType" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="高频问题报告" name="3"></el-tab-pane>
      <el-tab-pane label="总体规则数据" name="1"></el-tab-pane>
      <el-tab-pane label="详细规则数据" name="2"></el-tab-pane>
    </el-tabs>
    <el-table :data="tableData" v-loading="loading" v-if="showTable" @sort-change="sortChange">
      <el-table-column
        show-overflow-tooltip
        fixed
        label="序号"
        type="index"
        width="55"
      ></el-table-column>
      <el-table-column show-overflow-tooltip fixed label="编号" prop="fileId">
        <template #default="scope">
          <span>{{ dealFileId(scope.row.fileId) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="文件名称" prop="fileName"></el-table-column>
      <el-table-column show-overflow-tooltip label="创建人" prop="createBy"></el-table-column>
      <el-table-column
        show-overflow-tooltip
        sortable="custom"
        label="创建时间"
        prop="createTime"
      ></el-table-column>
      <el-table-column width="120" label="操作" fixed="right">
        <template #default="scope">
          <el-button type="danger" @click="handleRemove(scope.row)" link>删除</el-button>
          <el-button type="primary" @click="handleUpload(scope.row)" link>下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button type="primary" @click="delAll">删除</el-button> -->
    <Pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.page"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth.js'
import { recordListAPI, delRecordAPI } from '@/api/history.js'
import { ElMessageBox, ElMessage } from 'element-plus'
import Pagination from '@/components/Pagination/index.vue'
import { formatNumber, downloadFile } from '@/utils/index.js'
const authStore = useAuthStore()
const router = useRouter()
const tableData = ref([])
const showTable = ref(true)
const total = ref(0)
const loading = ref(false)
const queryParams = ref({
  pageSize: 10,
  page: 1,
  exportType: '3',
  sorting: '1',
})

/** 查询列表 */
function getList() {
  loading.value = true
  recordListAPI(queryParams.value).then((res) => {
    tableData.value = res.data.items
    total.value = res.data.total
    loading.value = false
  })
}

watch(
  () => {
    return queryParams
  },
  (newValue) => {
    getList()
  },
  {
    deep: true,
  },
)
const handleClick = async (a, b, c) => {
  console.log(a, b, c)
  // 先销毁表格
  showTable.value = false
  // 等待 DOM 更新
  await nextTick()
  // 重新创建表格
  showTable.value = true
  queryParams.value.sorting = '1'
}
const sortChange = (data) => {
  console.log(data, 'datasortChangesortChange')
  if (data.prop === 'createTime') {
    if (data.order === 'descending') {
      queryParams.value.sorting = '2'
    } else {
      queryParams.value.sorting = '1'
    }
  }
}
const dealFileId = (id) => {
  let str = ''
  switch (queryParams.value.exportType) {
    case '1':
      str = 'Z-'
      break
    case '2':
      str = 'X-'
      break
    case '3':
      str = 'G-'
      break
    default:
      str = 'Z-'
  }
  return str + formatNumber(id, 4)
}
// const delAll = () => {
//   tableData.value.forEach((item, index) => {
//     delRecordAPI({ fileId: item.fileId, fileUrl: item.fileUrl }).then((res) => {})
//   })
//   queryParams.value.page++
// }
const handleRemove = (row) => {
  ElMessageBox.confirm('确认删除该条记录吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      delRecordAPI({ fileId: row.fileId, fileUrl: row.fileUrl }).then((res) => {
        if (res.code === 200) {
          ElMessage.success('删除成功！')
          getList()
        }
      })
    })
    .catch(() => {})
}
const handleUpload = (row) => {
  console.log(row)
  // window.open(row.fileUrl)
  downloadFile({ fileName: row.fileName, fileUrl: row.fileUrl })
}
onMounted(() => {
  getList()
})
defineOptions({
  name: 'exportRecords',
})
</script>

<style lang="scss" scoped>
.exportRecords {
  height: 100%;
  :deep(.el-table) {
    height: 80%;
  }
}
</style>
